unity3D 实战《小十传奇》系列之一：构建UI系统

2024-06-03 13:30| 来源: 网络整理| 查看: 265

今天开始学习慕课网上的unity3D教程，在学习的过程中记录下来，帮助自己和网友们梳理下unity3D做游戏的流程。

游戏玩法

小十传奇讲的是一个方块下落，若周围数字相加等于10就自动消除的游戏。

游戏截图

稍后补上

准备工作

去慕课网下载需要的素材和一个GDgeek工具包，下载地址：走你

GDgeek工具包在assets目录下面，在自己的Project 中新建一个Plugins目录，讲GDGeek粘贴进去。

unity3D的版本需要在4.6版本以上（好像是这个版本以上才有UI这个工具条的）

游戏架构

游戏采用传统的MVC模式，即Model View Controll模式，模型层定义方块，视图层显示UI和动画控制层负责逻辑判断和动作响应

操作步骤 1.新建三个空对象，分别命名为Model View Ctrl,然后在新建Panel(工具条—UI—Panel),会自动生成一个Canvas和EventSystem.把Canvas重命名为UI,把相机重命名成Camera,拖动Camera和UI形成以下结构：

2.这时候如果仔细看视频里的untiy界面中的Game会发现，人家的Game窗口就是手机屏幕的分辨率，而我们的是全屏，修改办法：

单击+号，自定义个分辨率，比如我这里用的是1080X1920,若想横屏，就把横竖分辨率调下位置。

3.单击UI,然后在Canvas组件中吧Camera拖给RenderCamera,然后UI就跟随相机移动了。

4.给游戏的三个界面，Start Play End .这三个都是Panel.结构层次如下：

5.在Begin下面新建一个Text,改名为Title,调整字体大小和文字位置和文字框的大小

鼠标放在Pos X上面，点击左键后滑动可以调节，其他类似。

继续新建一个按钮，叫做开始游戏，调整位置。效果如图：

6.这时候，将Game窗口调整下，会发现，界面就乱了，以为按钮和文本的大小是固定值，并不会自动适配，怎么办呢？

这时候要用到GDGeek工具包了。在Project面板中搜索offset

建立一个空的object,命名为Offset,然后这个Offset移到Camera下面，把UI移到Offset下面，把UIOffset脚本拖到Offset上面，把主要的panel拖给Rect参数，Original分辨率填写1080X1920.

同时打开enable选项，然后根据效果再调整分辨率，知道自己满意。我最终修改的结果如图：

7.在End中添加Text,内容为“恭喜你获得了X分”，调整位置和大小，注意将文本Text拖到End下面，因为Unity中结构树下面的处在上层，所以把End拖到Panel的最下面来。

到此游戏的第一阶段基本结束。

这节，MVC结构可以很方便的帮我们分离显示和逻辑，有一天游戏玩法要改只需要该逻辑部分就行，或者有一天2D游戏不火了，需要3D游戏，那么只要修改显示层就可以快速适应市场变化，而不是重新开发一套游戏。

所以说好的结构可以让游戏生存下来，而差劲的结构会让游戏走向死亡。

我是orzangleli,谢谢你一直阅读到现在，如果你看到了这篇文章，请麻烦回复我下，给我点动力更新下去，多谢！

【本文地址】

今日新闻